element

2023-09-22 18:14| 来源: 网络整理| 查看: 265

最近在使用vue的element-ui前端框架中的el-tabs和el-table混合使用，发现了很多小问题。

1、问题一：el-tabs会使el-tab-pane 下面的数据一次性加载出来，导致数据更新不及时

刚开始写的代码时这样的，发现页面加载的时候，会把两个tab的页面的请求一次性加载出来。如果tab页面过多，会导致请求过多，造成页面卡顿，最重要的是页面数据实时变化的话不能及时获取到最新数据。

对此问题，使用了v-if来解决，每次对标签下的 v-if为真的数据渲染，更改后的代码时这样的：

一开始只设置其中一个为true其他都为false，当点击tab切换时去改变v-if的值，这样就可以解决上面的问题，首次加载页面只会渲染其中一个tab的内容，同时点击tab切换时页面重新渲染页面。

2、问题二：el-tabs 下实时加载表格，只有第一个tab的加载loading显示出来，其他的loading都有没效果显示 < !-- custom-table子组件内代码 --> ... export default { data() { return { loading :false, } }, mounted(){ this.getDataList() }, methods:{ async getDataList() { this.loading = true // let res = await getListRequest() // 处理数据渲染在table上 this.loading = false }, } }

在上面的子组件中，封装了element-ui的el-table和初始化加载表格列表的方法，调试发现每次切换tab页面的 getDataList 请求数据的方法都会执行，注释掉this.loading = false后，页面一直转圈，证明这个方法每次切换tab都是执行的。

用table的doLayout没有解决这个问题。

去网上找看看其他人有没有遇到过这个问题都没找到，忽然看到这么一句话：element-ui很多问题用nextTick和setTimeout都能解决的。

随后我改了下我的代码

async getDataList() { this.loading = true // let res = await getListRequest() // 处理数据渲染在table上 setTimeout(()=>{ this.loading = false },300) },

完美解决切换tab转圈加载不显示的问题。

3、问题三：el-tabs切换el-table造成页面抖动的问题

看到网上其他人给了解法

beforeUpdate() { this.$nextTick(() => { this.$refs['tableRef'].doLayout() }) }

设置了没有起作用。

后来发现因为我表格渲染数据的垂直方法出现了滚动条，el-table表格抖动的问题解决了，但是页面抖动的问题还是没有解决。

导致表格table出现抖动的原因是页面出现重绘。

el-table表格抖动的解决办法有

动态切换表头的时候闪烁是因为表头重新计算高度导致的，重写表格样式即可

//重写表格样式，不在自动计算，解决表格渲染时闪烁问题 //不写这个使用v-if重新渲染表格的时候会再次计算下宽高，导致了抖动div高度=table容器高度/行数 .el-table .cell{ height:20px!important; }

注意：这个方式会把每行高度写死，页面的高度就不会发生变化，滚动条也不会突然出现或者突然消失。但是多余的内容就显示不全了。

表头变动的时候数据可能会下掉，使用element中的dolayout函数解决 element中写到：doLayout方法对table进行重新布局。当Table或其祖先元素由隐藏切换为显示时，可能需要调用此方法

beforeUpdate(){ this.$nextTick(() => { this.$refs['tableRef'].doLayout(); }) }

设置表格宽度为99.9%，要加上!important，不然css样式不起效果。

.el-table{ width:99.9%!important; }

el-table抖动可以用上述方式解决，页面的抖动没有办法用上述方式解决。

页面抖动的解决办法

因为页面内容长度超出了可视区域，出现了竖向滚动条。

页面抖动的原因是：1.el-tab页面切换的时候会出现重绘；2.页面有滚动条，造成抖动的部分就是滚动条的宽度，出现抖动的时候是要出滚动条的那个点。

给页面的最外层的标签设置宽度100% - 滚动条的宽度，发现页面还是出现抖动，加载完成后，页面宽度没有铺满全屏，少了滚动条的宽度。

不论设置width是多少百分比，把浏览器刷新或者浏览器宽度往小缩或往外拉的时候，竖向滚动条刚好要消失或刚好出现的时候，都会触发抖动的现象。

为解决页面抖动就不懂让页面的垂直方向出现滚动条，为此，只能让页面的子元素出现滚动条，给el-table设置了高度，让表格在页面内滚动，而不是整个页面滚动。

4、问题四：当出现多个el-tab时，里面的el-table加载总是会实实在在的看到表格宽度的变化，让用户体验不是很好。

在切换tab的事件中使用：

handleTabClick() { setTimeout(()=>{ this.$refs['tableRef'].doLayout() },200); } 5、问题五：el-table用v-if实现 el-table-column的更多列隐藏、显示；切换的时候表格列数据错乱。

导致问题的原因：el-table的列是基础循环出来的，vue在dom重新渲染时有一个性能优化机制，相同dom会被复用，所以给每一个列加了一个特定的key，确定了列的唯一性，就可以解决。

【本文地址】

element

element

今日新闻

推荐新闻